export default {
basic_examples: `<template>
  <view>
    <view class="navbar-box" :style="{'background':\`\${bgColor}\`,'z-index':\`\${zIndex}\`}">
      <view class="status-bar" :style="{'height':\`\${statusBarHeight}px\`}"></view>
      <view :style="{'height':\`\${navHeight}px\`}" class="content-box-nav">
        <slot name="nav">
          <view class="dev-nav-title">
            <!-- 返回箭头 -->
            <dev-svg-image v-if="isBack" @tap="clickBack" svg-name="leftAroow" :modify-color="iconColor">
            </dev-svg-image>
            <!-- 导航名称 -->
            <view class="title-box" :style="{'color':\`\${color}\`,'font-size':\`\${size}rpx\`,'text-align':mode}">
              {{title}}
            </view>
          </view>
        </slot>
      </view>
    </view>
    <!-- 如有特殊背景需求，可以使用bottom具名插槽进行导航栏底层自定义 -->
    <view>
      <slot name="bottom">
        <view :style="{'height':\`\${statusBarHeight+navHeight}px\`}"></view>
      </slot>
    </view>
  </view>
</template>

<script>
  /******************************************* 娄渊洋
   * 导航栏
   * @property {String} 'mode' 导航栏文字位置
   * @property {String,Number} 'title' 导航名字
   * @property {String} 'color' 导航栏文字颜色
   * @property {String,Number} 'size' 导航栏文字大小
   * @property {Boolean} 'is-back' 是否显示返回箭头
   * @property {String} 'icon-color' 返回箭头颜色
   * @property {String} 'bg-color' 导航栏背景颜色（默认渐变色）可自定义任何颜色
   * @property {String,Number} 'z-index' 导航栏层级

   */
  export default {
    name: "dev-navbar",
    props: {
      //导航栏文字位置
      mode:{
        type: String,
        default: 'left' //right center
      },
      //导航名字
      title: {
        type: [String, Number],
        default: '返回'
      },
      //文字颜色
      color: {
        type: String,
        default: '#fff'
      },
      //标题文字大小
      size: {
        type: [String, Number],
        default: 36
      },
      //是否显示返回箭头
      isBack: {
        type: Boolean,
        default: true
      },
      //左箭头颜色
      iconColor: {
        type: String,
        default: '#fff'
      },
      //背景颜色
      bgColor: {
        type: String,
        default: 'linear-gradient(270deg, #FA1E39 0%, #FA2A20 100%)'
      },
      //导航栏层级
      zIndex: {
        type: [String, Number],
        default: 999
      }
    },
    data() {
      return {
        statusBarHeight: global.statusBarHeight, //状态栏高度
        navHeight: global.navHeight, //导航栏高度
      };
    },
    created() {
      if (!global.navAllHeight) {
        console.log('重新获取导航栏了')
        this.getSystemInfo(); //获取手机系统信息
      }
    },
    methods: {
      //获取手机系统信息
      getSystemInfo() {
        let _this = this;
        uni.getSystemInfo({
          success: function(res) {
            _this.statusBarHeight = global.statusBarHeight = res.statusBarHeight;
            const menu = uni.getMenuButtonBoundingClientRect();
            _this.navHeight = global.navHeight = (menu.bottom + menu.top - res.statusBarHeight * 2);
            global.navAllHeight = menu.bottom + menu.top - res.statusBarHeight;
            _this.$emit('information', {
              'navAllHeight': global.navAllHeight,
              'navHeight': _this.navHeight
            })
          }
        });
      },
      //点击返回按钮
      clickBack() {
        if (!this.isBack) return
        this.$emit('back')
        uni.navigateBack({
          delta: 1
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .navbar-box {
    position: fixed;
    width: 750rpx;

    .status-bar {
      width: 100%;
    }

    .dev-nav-title {
      width: 100%;
      display: flex;
      align-items: center;

      .title-box {
        width: 100%;
      }
    }

    .content-box-nav {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }
  }
</style>
`,
default_use:`<template>
  <view>
    <dev-navbar></dev-navbar>
  </view>
</template>`,
mode_use:`<template>
  <view>
    <dev-navbar mode="center" title="名称" :is-back="false"></dev-navbar>
  </view>
</template>`,
nav_use:`<template>
  <view>
    <dev-navbar>
    	<template slot="nav">
    		<view class="">
    			我是自定义内容 ，可以自定义任何数据
    		</view>
    	</template>
    </dev-navbar>
  </view>
</template>`,



}
